<template>
  <el-container>
    <el-main>
      <div class="sdc-detail-content" v-if="tabIndex=='1'">
        <div class="detail-outer-div">
          <svg-icon icon-class="xiangqing" class="sdc-detail-title-icon"></svg-icon>
          <svg-icon icon-class="shuxian" class="sdc-detail-title-icon"></svg-icon>
          <div class="sdc-detail-title">卡号：{{cardNumber}} 出库情况</div>
        </div>
        <div class="sdc-content-table">
          <el-timeline style="margin-top: 20px">
            <el-timeline-item
              v-for="(activity, index) in outRecords"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
            >
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <div class="sdc-detail-content" v-if="tabIndex==='1'">
        <div class="detail-outer-div">
          <svg-icon icon-class="liuliang" class="sdc-detail-title-icon"></svg-icon>
          <svg-icon icon-class="shuxian" class="sdc-detail-title-icon"></svg-icon>
          <div class="sdc-detail-title">套餐用量情况</div>
        </div>
        <div class="sdc-content-table">
          <cardFlow-view v-bind:cardId="cardId"></cardFlow-view>
        </div>
      </div>

      <div class="sdc-detail-content" v-if="tabIndex==='1'">
        <div class="detail-outer-div">
          <svg-icon icon-class="tubiao" class="sdc-detail-title-icon"></svg-icon>
          <svg-icon icon-class="shuxian" class="sdc-detail-title-icon"></svg-icon>
          <div class="sdc-detail-title">每日用量</div>
        </div>
        <div class="sdc-content-table">
          <dayFlow-view v-bind:cardId="cardId"></dayFlow-view>
        </div>
      </div>
      <div class="sdc-detail-content" v-if="tabIndex==='1'">
        <div class="detail-outer-div">
          <svg-icon icon-class="tubiao" class="sdc-detail-title-icon"></svg-icon>
          <svg-icon icon-class="shuxian" class="sdc-detail-title-icon"></svg-icon>
          <div class="sdc-detail-title">每月用量</div>
        </div>
        <div class="sdc-content-table">
          <monthFlow-view v-bind:cardId="cardId"></monthFlow-view>
        </div>
      </div>
      <div class="sdc-detail-content" v-if="tabIndex==='1'">
        <div class="detail-outer-div">
          <svg-icon icon-class="dingdan" class="sdc-detail-title-icon"></svg-icon>
          <svg-icon icon-class="shuxian" class="sdc-detail-title-icon"></svg-icon>
          <div class="sdc-detail-title">订单情况</div>
        </div>
        <div class="sdc-content-table">
          <orderView v-bind:cardNum="cardNumber"></orderView>
        </div>
      </div>
      <div class="sdc-detail-content" v-if="tabIndex==='1'">
        <div class="detail-outer-div">
          <svg-icon icon-class="dingdan" class="sdc-detail-title-icon"></svg-icon>
          <svg-icon icon-class="shuxian" class="sdc-detail-title-icon"></svg-icon>
          <div class="sdc-detail-title">余额变动</div>
        </div>
        <div class="sdc-content-table">
          <balanceChangeView v-bind:cardId="cardId"></balanceChangeView>
        </div>
      </div>


      <div class="sdc-detail-content" v-if="tabIndex==='2'">
        <div class="detail-outer-div">
          <svg-icon icon-class="xiangqing" class="sdc-detail-title-icon"></svg-icon>
          <svg-icon icon-class="shuxian" class="sdc-detail-title-icon"></svg-icon>
          <div class="sdc-detail-title">卡号：{{cardNumber}} 卡操作记录</div>
        </div>
        <div class="sdc-content-table">
          <stateLog-view v-bind:cardNumber="cardNumber"></stateLog-view>
        </div>
        <div class="detail-outer-div">
          <svg-icon icon-class="xiangqing" class="sdc-detail-title-icon"></svg-icon>
          <svg-icon icon-class="shuxian" class="sdc-detail-title-icon"></svg-icon>
          <div class="sdc-detail-title">卡号：{{cardNumber}} 状态更改记录</div>
        </div>
        <div class="sdc-content-table">
          <changeLog-view v-bind:cardNumber="cardNumber"></changeLog-view>
        </div>

      </div>

      <div class="sdc-detail-content" v-if="tabIndex==='3'">
        <div class="detail-outer-div">
          <svg-icon icon-class="xiangqing" class="sdc-detail-title-icon"></svg-icon>
          <svg-icon icon-class="shuxian" class="sdc-detail-title-icon"></svg-icon>
          <div class="sdc-detail-title">卡号：{{cardNumber}} 轮询日志</div>
        </div>
        <div class="sdc-content-table">
          <billingLog-view v-bind:cardNumber="cardNumber" ></billingLog-view>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import {listOutrecord} from '@/api/getData'
  import cardFlowView from '@/components/cardFlowView'
  import dayFlowView from '@/components/dayFlowView'
  import monthFlowView from '@/components/monthFlowView'
  import orderView from '@/components/orderView'
  import changeLogView from '@/components/changeLogView'
  import stateLogView from '@/components/stateLogView'
  import billingLogView from '@/components/billingLogView'
  import balanceChangeView from '@/components/balanceChangeView'

  import {mapGetters} from 'vuex'

  export default {
    name: 'Home',
    data() {
      return {
        cardId: '',
        cardNumber: '',
        outRecords: [{
          content: 'OEM',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-caret-right'
        }]
      }
    },
    created() {
      this.cardId = this.$route.query.cardId;
      this.cardNumber = this.$route.query.cardNumber
      listOutrecord({id: this.cardId}).then(v => {
        if (v._result) {
          for (let i in v.data) {
            let color = "#f7b940"
            let icon = "el-icon-loading"
            if (i === v.data.length - 1) {
              color = "#0bbd87"
              icon = null
            }
            let obj = {
              content: v.data[i],
              color,
              icon
            }
            this.outRecords.push(obj)
          }

        }
      })
      this.$store.dispatch('cardDetail/RowMenusStatus', {rowMenuisShow: true}).then(() => {
      }).catch(() => {

      })
    },
    components: {
      cardFlowView,
      dayFlowView,
      monthFlowView,
      orderView,
      changeLogView,
      billingLogView,
      stateLogView,
      balanceChangeView
    },
    destroyed() {
      this.$store.dispatch('cardDetail/RowMenusStatus', {rowMenuisShow: false}).then(() => {
      }).catch(() => {
      })
    },
    computed: {
      ...mapGetters([
        'tabIndex',
      ])
    },
  }
</script>

<style>

</style>
